<template>
	<view class="pageAll">
		<view class="content">
			<view class="stepTitle">
				第三步
			</view>
			<view class="stepInfo">
				<label class="fromInputLabel">
					<input v-model="form.type" class="formFood" type="text" @focus="inputType" @blur="inputTypeBlur" @confirm="getNextInput('aging')" :focus="myPalVisible.aging" />
					<view v-if="myPalVisible.type" class="fromInputLabelText" @click="inputType">
						<text class="palLeft">{{placeholder.type.left}}</text>
						<text class="palRight">{{placeholder.type.right}}</text>
					</view>
				</label>
				<label class="fromInputLabel">
					<input v-model="form.aging" class="formAddress" type="text" @focus="inputAging" @blur="inputAgingBlur" :focus="!myPalVisible.aging" @confirm="getNextInput('supply')"/>
					<view v-if="myPalVisible.aging" class="fromInputLabelText" @click="inputAging">
						<text class="palLeft">{{placeholder.aging.left}}</text>
						<text class="palRight">{{placeholder.aging.right}}</text>
					</view>
				</label>
				<label class="fromInputLabel">
					<input v-model="form.supply" class="formAddress" type="text" @focus="inputSupply" @blur="inputSupplyBlur" :focus="!myPalVisible.supply" @confirm="getNextInput('cycle')"/>
					<view v-if="myPalVisible.supply" class="fromInputLabelText" @click="inputSupply">
						<text class="palLeft">{{placeholder.supply.left}}</text>
						<text class="palRight">{{placeholder.supply.right}}</text>
					</view>
				</label>
				<label class="fromInputLabel">
					<input v-model="form.cycle" class="formAddress" @focus="inputCycle" @blur="inputCycleBlur" :focus="!myPalVisible.cycle" @confirm="getNextInput('remarks')"/>
					<view v-if="myPalVisible.cycle" class="fromInputLabelText" @click="inputCycle">
						<text class="palLeft">{{placeholder.cycle.left}}</text>
						<text class="palRight">{{placeholder.cycle.right}}</text>
					</view>
				</label>
				<label class="fromInputLabel">
					<input v-model="form.remarks" class="formAddress" @focus="inputRemarks" @blur="inputRemarksBlur" :focus="!myPalVisible.remarks"/>
					<view v-if="myPalVisible.remarks" class="fromInputLabelText" @click="inputRemarks">
						<text class="palLeft">{{placeholder.remarks.left}}</text>
						<text class="palRight">{{placeholder.remarks.right}}</text>
					</view>
				</label>
			</view>
			<view class="nextStep">
				<button @click="preStep">
					上一步
				</button>
				<button @click="nextStep">
					下一步
				</button>
			</view>
		</view>
		<view class="bottomBtnView">
			<button class="bottomBtn" @click="saveDraft" hover-class="subActive">
				存为草稿
			</button>
		</view>
	</view>
</template>

<script>
	import {
		ValidateReport,
		AvoidDoubleClick,
		HBValidate
	} from '@/utils/tools.js'
	const avoidDoubleClick = new AvoidDoubleClick()
	export default {
		data() {
			return {
				form: {
					type: null,
					aging: null,
					supply: null,
					cycle: null,
					remarks: null,
				},
				myPalVisible: {
					type: true,
					aging: true,
					supply: true,
					cycle: true,
					remarks: true,
				},
				placeholder: {
					type: {
						left: '请输入发货方式',
						right: '如: 顺丰快递'
					},
					aging: {
						left: '请输入发货时效 (即日)',
						right: '如: 24小时'
					},
					supply: {
						left: '请输入月供应量',
						right: '如: 100袋'
					},
					cycle: {
						left: '请输入供应周期',
						right: '如:11月至次年3月'
					},
					remarks: {
						left: '备注',
						right: '如: 最低起定量30包'
					},
				},
				isWorking: false, // 防止用户多次点击
			}
		},
		methods: {
			// 发货方式，模拟占位符显示与隐藏
			inputType() {
				this.myPalVisible.type = false
			},
			inputTypeBlur() {
				if (this.form.type) {
					this.myPalVisible.type = false
				} else {
					this.myPalVisible.type = true
				}
			},
			// 模拟占位符显示与隐藏
			inputAging(e) {
				this.myPalVisible.aging = false
			},
			inputAgingBlur() {
				if (this.form.aging) {
					this.myPalVisible.aging = false
				} else {
					this.myPalVisible.aging = true
				}
			},
			//模拟占位符显示与隐藏
			inputSupply(e) {
				this.myPalVisible.supply = false
			},
			inputSupplyBlur() {
				if (this.form.supply) {
					this.myPalVisible.supply = false
				} else {
					this.myPalVisible.supply = true
				}
			},
			// 模拟占位符显示与隐藏
			inputCycle(e) {
				this.myPalVisible.cycle = false
			},
			inputCycleBlur() {
				if (this.form.cycle) {
					this.myPalVisible.cycle = false
				} else {
					this.myPalVisible.cycle = true
				}
			},
			// 模拟占位符显示与隐藏
			inputRemarks(e) {
				this.myPalVisible.remarks = false
			},
			inputRemarksBlur() {
				if (this.form.remarks) {
					this.myPalVisible.remarks = false
				} else {
					this.myPalVisible.remarks = true
				}
			},
			getNextInput(value) {
				this.$set(this.myPalVisible, value, false)
			},
			saveDraft() {
				const validateReport = new ValidateReport()
				// 如果存在值则对值进行校验， 否则不进行校验-----开始
				if (this.form.type) {
					if (!validateReport.vdItemNotNone(this.form.type, '发货方式')) {
						return false
					}
				}
				if (this.form.aging) {
					if (!validateReport.vdItemNotNone(this.form.aging, '发货时效')) {
						return false
					}
				}

				if (this.form.supply) {
					if (!validateReport.vdItemNotNone(this.form.supply, '月供应量')) {
						return false
					}
				}

				if (this.form.cycle) {
					if (!validateReport.vdItemNotNone(this.form.cycle, '供应周期')) {
						return false
					}
				}
				// 如果存在值则对值进行校验， 否则不进行校验-----结束

				this.$store.commit('setCurrTag', 1)
				this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))

				if (avoidDoubleClick.isWork()) {
					return false
				}

				if (this.$store.getters.getReportDraft.id) {
					this.$api.selectDraftUpdate(
							this.$store.getters.getReportDraft
						)
						.then(res => {
							if (res.status) {
								uni.switchTab({
									url: '../foodReport/foodReport'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}
							avoidDoubleClick.toRest()
						})
				} else {
					this.$api.selectDraft(
							this.$store.getters.getReportDraft
						)
						.then(res => {

							if (res.status) {
								uni.switchTab({
									url: '../foodReport/foodReport'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1500,
								})
							}
							avoidDoubleClick.toRest()
						})
				}

			},
			preStep() {
				const validateReport = new ValidateReport()
				// 如果存在值则对值进行校验， 否则不进行校验-----开始
				if (this.form.type) {
					if (!validateReport.vdItemNotNone(this.form.type, '发货方式')) {
						return false
					}
				}
				if (this.form.aging) {
					if (!validateReport.vdItemNotNone(this.form.aging, '发货时效')) {
						return false
					}
				}
				
				if (this.form.supply) {
					if (!validateReport.vdItemNotNone(this.form.supply, '月供应量')) {
						return false
					}
				}
				
				if (this.form.cycle) {
					if (!validateReport.vdItemNotNone(this.form.cycle, '供应周期')) {
						return false
					}
				}
				// 如果存在值则对值进行校验， 否则不进行校验-----结束
				
				this.$store.commit('setCurrTag', 1)
				this.$store.commit('setReportDraft', JSON.parse(JSON.stringify(this.form)))
				uni.navigateBack({
					url: '../secondStep/secondStep'
				})
			},
			nextStep() {

				const validateReport = new ValidateReport()
				if (validateReport.vdItemNotNone(this.form.type, '发货方式') && validateReport.vdItemNotNone(this.form.aging, '发货时效') &&
					validateReport.vdItemNotNone(this.form.supply, '月供应量') && validateReport.vdItemNotNone(this.form.cycle, '供应周期')
					&& validateReport.vdItemNotNone(this.form.remarks, '备注')) {
					this.$store.commit('setReportDraft', JSON.parse(JSON.stringify(this.form)))
					uni.navigateTo({
						url: '../forthStep/forthStep'
					})
				}

			},
			getFormInfo() {
				const tempForm = this.$store.getters.getReportDraft
				this.$set(this.form, 'type', tempForm.distribution_type ? tempForm.distribution_type : '')
				this.$set(this.form, 'aging', tempForm.delivery_time ? tempForm.delivery_time : '')
				this.$set(this.form, 'cycle', tempForm.cycle ? tempForm.cycle : '')
				this.$set(this.form, 'supply', tempForm.supply ? tempForm.supply : '')
				this.$set(this.form, 'remarks', tempForm.remark ? tempForm.remark : '')
				for (const index in this.form) {
					if (this.form[index]) {
						this.myPalVisible[index] = false
					}
				}
			}
		},
		onLoad() {
			this.getFormInfo()
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}

	.content {
		box-shadow: 0 0 20upx 5upx rgba(240, 41, 41, 0.1);
		background-color: #FFF;
		padding: 22upx;
		height: 777upx;
		border-radius: 10upx;
	}

	.stepTitle {
		font-size: 36upx;
		color: #f7533e;
		text-align: center;
		letter-spacing: 10upx;
		padding: 10upx 0;
		font-weight: bold;
		box-sizing: border-box;
	}

	.stepInfo {
		font-size: 32upx;
		color: #6f6f6f;
		margin-top: 17upx;
	}

	.formFood {
		background: #fdf7f6;
		padding: 0 20upx;
		border: 1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		height: 95.33upx;
	}

	.formAddress {
		background: #fdf5f3;
		padding: 0 20upx;
		border: 1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		height: 95.33upx;
	}

	.fromQuality {
		background: #fdf7f6;
		padding: 25upx 20upx 0 20upx;
		border: 1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		width: auto;
		height: 321.33upx;
	}

	.fromInputLabel {
		position: relative;
		display: block;
	}

	.fromInputLabel .fromInputLabelText {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 95.33upx;
		padding: 0 20upx;
		width: 100%;
	}

	.fromInputLabelText text {
		display: inline-block;
	}

	.fromInputLabelText .palLeft {
		width: 53%;
	}

	.nextStep {
		text-align: center;
		margin-top: 60upx;
		display: flex;
		text-align: center;
	}

	.nextStep button:first {
		margin-left: 140upx;
	}

	.nextStep button {
		width: 140upx;
		height: 52upx;
		line-height: 52upx;
		color: #6f6f6f;
		font-size: 32upx;
		background-color: #fdf5f3;
		padding: 0;
	}

	.nextStep button:active {
		background-color: #fdf7f6;
	}

	.nextStep button:after {
		border: 1upx solid #eeeeee;
	}

	.bottomBtnView {
		text-align: center;
		margin-top: 100upx;
	}

	.bottomBtn {
		width: 140upx;
		height: 52upx;
		line-height: 52upx;
		color: #6f6f6f;
		font-size: 32upx;
		background-color: #ff0000;
		color: #FFF;
		padding: 0;
	}

	.subActive {
		background-color: #c90000 !important;
	}

	.placeholderClass {
		font-size: 32upx;
		color: #6f6f6f;
	}
</style>
